<template>
  <ActionPanel v-if="close">
    <Editor :seed-name="props.seedName" :column-name="props.columnName" :column="data" />
    <template v-if="close" #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
  <Editor v-if="!close && active === 'property'" :seed-name="props.seedName" :column-name="props.columnName" :column="data" />
  <ElementEditor v-if="!close && active === 'component'" :type="data.type" v-model:element="data.element" v-model:element-props="data.elementProps" />
</template>
<script lang="ts" setup>
  import { active, getSeed } from '@/views/seed-dev'
  import { ElButton } from 'element-plus'
  import { inject, ref, watch } from 'vue';
  import { save } from '..';
  import { ColumnConfiguration } from '@/views/dev-types';
  import { ElementEditor } from '../../ElementEditor';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import Editor from './Editor.vue';

  const props = defineProps<{seedName: string, columnName: string}>()

  const close = inject<() => void>(closePopupKey, void 0)
  function getInitData() {    
    return getSeed(props.seedName)?.columns[props.columnName]
  }

  const name = ref<string>(props.columnName)
  const data = ref<ColumnConfiguration>(getInitData())

  function doSave() {
    save(props.seedName, name.value, data.value)
  }

  watch([() => props.seedName, () => props.columnName], () => {
    name.value = props.columnName
    data.value = getInitData()
  })
  watch(() => data.value, () => save(props.seedName, name.value, data.value), { deep: true })
</script>